<template>
  <div class="recruit">

    <div class="recruit-header">
      <div class="recruit-header-content">
        <div class="recruit-header-img" />
      </div>
    </div>

    <div class="recruit-container">

      <div class="enter">

        <div class="enter-hd">
          <div class="desc">
            全国范围内诚招合作伙伴。诚挚邀请有实力、有本地资源的伙伴加入，共赢本地生活美好未来！
            <button type="button" class="kw-btn btn-text btn-large">
              <span class="kw-btn__inner" @click="dialogVisible=true">查看申请详情</span>

            </button>
          </div>
          <div>
            <h2>成为商家，只需三步</h2>
            <div class="steps">
              <div class="steps-icon"><img
                src=""
                alt=""
              >
                申请
              </div>
              <div class="steps-arrow"><img
                src=""
                alt=""
              ></div>
              <div class="steps-icon"><img
                src="//shadow.elemecdn.com/faas/daili-recruit-gray/static/img/examine.19616be.png"
                alt=""
              >
                审批
              </div>
              <div class="steps-arrow"><img
                src=""
                alt=""
              ></div>
              <div class="steps-icon"><img
                src=""
                alt=""
              >
                开店
              </div>
            </div>
          </div>
        </div>

        <!-- 注册列表 -->
        <div class="enter-register">

          <el-form ref="form" :model="form" :rules="rules" label-width="140px">

            <div v-show="step===1">
              <el-form-item label="商家手机号" prop="loginName">
                <el-input v-model="form.loginName" />

                <div class="mix-input-btn">
                  <el-link :disabled="btnSendVisable" @click="sendSms">{{ smsinfo }}</el-link>
                </div>
              </el-form-item>

              <el-form-item label="验证码" prop="code">
                <el-input v-model="form.code" />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" :disabled="loginDisabled" @click="btnNext">立即注册</el-button>
              </el-form-item>

              <el-form-item>
                <el-checkbox v-model="agree">
                  我已阅读并同意
                  <a href="/#/safety-policy" target="_blank" class="el-link el-link--primary is-underline">华信商家版隐私政策</a>
                </el-checkbox>

              </el-form-item>
            </div>

            <div v-show="step===2">

              <el-form-item label="商家名称" prop="name">
                <el-input v-model="form.name" placeholder="商家名称" />
              </el-form-item>

              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="form.phone" placeholder="联系电话" />
              </el-form-item>

              <el-form-item label="密码" prop="loginPwd">
                <el-input v-model="form.loginPwd" type="password" placeholder="密码" />
              </el-form-item>

              <el-form-item label="确认密码" prop="reLoginPwd">
                <el-input v-model="form.reLoginPwd" type="password" placeholder="确认密码" />
              </el-form-item>

              <el-form-item label="地图位置" prop="longitude" style="text-align:left;">
                <span>经度:{{ form.longitude }} 纬度:{{ form.latitude }}</span>
                <el-button type="primary" @click="mapShow=true">选择位置</el-button>

                <div style="display:none;">
                  <el-input v-model="form.longitude" />
                </div>
              </el-form-item>

              <el-form-item label="商家地址" prop="address">
                <el-input v-model="form.address" placeholder="商家地址" />
              </el-form-item>

              <el-form-item label="商家图片" prop="picture">
                <el-upload
                  class="avatar-uploader"
                  :action="getUploadUrl()"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>

                <div style="display:none;">
                  <el-input v-model="form.picture" />
                </div>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="btnSave">提交信息</el-button>
              </el-form-item>

            </div>

            <div v-show="step===3">
              <el-result icon="success" title="申请信息已发送" sub-title="请耐心等待审核结果,会以短信通您." />
            </div>

          </el-form>

        </div>

      </div>

    </div>

    <!-- 申查申请 -->
    <el-dialog title="申请详情" :visible.sync="dialogVisible" width="450px">
      <div class="apply-detail">
        <div class="apply-detail-item">
          <h2>
            合作商申请基本条件：
          </h2>
          <ul>
            <li>
              有正规业务经营的公司资质，盈利状况良好；
            </li>
            <li>
              熟悉当地城市餐饮行业发展状况，在当地拥有良好的口碑资源；
            </li>
            <li>
              在当地拥有较强的政府人脉关系及宣传推广资源；
            </li>
            <li>
              较强的运营能力及成熟的行业经验；
            </li>
            <li>
              具备较强的经济实力；
            </li>
          </ul>
        </div>
        <div class="apply-detail-item">
          <h2>
            报名须知：
          </h2>
          <ul>
            <li>
              请详细阅读合作商申请基本条件；
            </li>
            <li>
              请确保您填写的信息真实、有效，如在申请过程中存在虚假信息，该平台有权随时终止合作流程；
            </li>
            <li>
              填写过程需要您用心填写，时间约2分钟；
            </li>
            <li>
              如您已经阅读完成，请继续您的报名！
            </li>
          </ul>
        </div>
      </div>

    </el-dialog>

    <!-- 地图选择器-->
    <el-dialog title="位置选择器" :visible.sync="mapShow" width="800px" append-to-body :close-on-click-modal="false">
      <BaiduAddress :item-data="form" @myclick="handlerLocation" />
    </el-dialog>

  </div>
</template>

<script>
import { isPhone } from '@/utils/validate.js'
import { sendSmsApi, validate } from '@/api/sms.js'
import { accountUsed, register } from '@/api/merchandiser.js'
import BaiduAddress from '@/components/BaiduAddress/index.vue'

export default {
  // 挂载地图级组件
  components: {
    BaiduAddress
  },
  data() {
    // 手机号是否已经被用过
    const phoneExists = (rule, value, callback) => {
      accountUsed(value).then(resp => {
        console.log(resp)
        if (resp.data) {
          this.btnSendVisable = true
          callback(new Error(resp.data))
        } else {
          this.btnSendVisable = false
          callback()
        }
      })
    }

    // 验证密码是否相同
    var pwdConfirmFunction = (rule, value, callback) => {
      if (value === this.form.loginPwd) {
        callback()
      } else {
        callback(new Error('两次输入的密码不一致'))
      }
    }

    return {
      // 百度地图
      mapShow: false,
      // 当前步骤
      step: 1,
      // 倒计时
      countDownNum: 0,
      // 是否同意
      agree: false,
      dialogVisible: false,
      smsinfo: '发送验证码',
      // 发送短信按钮是否禁用(true禁用，false启用 )
      btnSendVisable: true,
      form: {
        picture: undefined,
        address: undefined,
        latitude: undefined,
        longitude: undefined,
        uuid: undefined
      },
      rules: {
        loginName: [
          { required: true, message: '该值不能为空', trigger: 'blur' },
          { validator: phoneExists, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '该值不能为空', trigger: 'blur' }],
        address: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        picture: [
          { required: true, message: '该值不能为空', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '该值不能为空', trigger: 'blur' },
          { min: 4, max: 30, message: '密码长度在4-30个字符之间', trigger: 'blur' }
        ],
        reLoginPwd: [
          { required: true, message: '该值不能为空', trigger: 'blur' },
          { validator: pwdConfirmFunction, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 登录按钮是否禁用
    loginDisabled() {
      if (!this.agree) {
        return true
      }
      // 如果不为空
      if (this.form.loginName) {
        // 再验证手机号码格式是否正确，如果正确
        if (isPhone(this.form.loginName)) {
          return false
        } else {
          // 格式不正确
          return true
        }
      }
      return true
    }
  },
  created() {

  },
  methods: {
    getUploadUrl() {
      return 'http://localhost:8080/front/image/upload'
    },
    // 发送验证码
    sendSms() {
      if (!this.agree) {
        this.$message.error('请勾选并阅读华信商家版隐私政策')
        return
      }

      // 发送短信
      sendSmsApi(this.form.loginName).then(resp => {
        // 发送短信禁用，导计时
        this.btnSendVisable = true
        // 后发返回分钟
        this.countDownNum = resp.data.expired_minutes
        this.form.uuid = resp.data.uuid
        this.smsinfo = '(' + this.countDownNum + ')秒后重新发送'
        var tId = setInterval(() => {
          this.countDownNum--
          if (this.countDownNum === 0) {
            // 重新发送按钮启用
            this.btnSendVisable = false
            this.smsinfo = '发送验证码'
            clearInterval(tId)
          } else {
            this.smsinfo = '(' + this.countDownNum + ')秒后重新发送'
          }
        }, 1000)
      })
    },
    // 地图位置注册事件
    handlerLocation(resp) {
      console.log(resp)
      this.form.address = resp.address
      this.form.longitude = resp.longitude
      this.form.latitude = resp.latitude
      this.mapShow = false
    },
    // 图片上传成功以后返回的数据(json, file[blob]数据)
    handleAvatarSuccess(res, file) {
      this.form.picture = res.data.url
    },
    // 图片上传之前验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isJPG && isLt1M
    },
    // 立即注册
    btnNext() {
      // 验证输入的验证码是否正确
      validate(this.form).then(resp => {
        // 正确(进入到录入商家信息页面)
        this.step = 2
      })
    },
    // 提交保存商家信息
    btnSave() {
      // 验证数据有效性
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 保存
          register(this.form).then(resp => {
            this.step = 3
          })
        }
      })
    }
  }

}
</script>

<style scoped lang="scss">
  .recruit-header {
    background: #009bff;
    background: -webkit-gradient(linear, left top, right top, from(#00adff), to(#0082ff));
    background: linear-gradient(90deg, #00adff, #0082ff);
  }

  .recruit-header-content {
    position: relative;
    width: 940px;
    margin: 0 auto;
    height: 200px;
  }

  .recruit-header-img {
    position: absolute;
    left: -250px;
    width: 1440px;
    height: 100%;
    background: url(https://img.alicdn.com/imgextra/i1/O1CN01B3IqWN1lKuFrQqyvs_!!6000000004801-2-tps-5760-800.png) 50% no-repeat;
    background-size: cover;
  }

  .recruit-container {
    width: 940px;
    margin: 0 auto;
  }

  .enter {
    padding: 16px 16px 0;
    background: #fff;
    max-width: 652px;
    margin: 0 auto;
  }

  .recruit-container>div {
    min-height: calc(100vh - 200px);
  }

  .enter-hd {
    text-align: center;
  }

  .desc {
    text-align: left;
    background: #f5f7fa;
    border-radius: 6px;
    font-size: 13px;
    line-height: 22px;
    color: #909399;
    padding: 15px;
    margin-bottom: 32px;
  }

  .kw-breadcrumb-item,
  .kw-btn,
  .kw-checkbox .kw-checkbox-appearance,
  .kw-link,
  .kw-modal,
  .kw-pager li,
  .kw-pagination-size,
  .kw-pagination-total,
  .kw-radio .kw-radio-appearance,
  .kw-tooltip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .kw-btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    font-weight: 500;
    text-decoration: none;
    vertical-align: middle;
  }

  .kw-btn.btn-large {
    height: 40px;
    line-height: 38px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
  }

  .kw-btn.btn-text {
    color: #606266;
    background-color: transparent;
    padding: 0;
    border: none;
    position: relative;
    background: none;
  }

  .desc .kw-btn {
    color: #606266;
    height: 22px;
    line-height: 22px;
    vertical-align: baseline;
  }

  .enter-hd h2 {
    color: #303133;
    font-size: 18px;
    font-weight: 400;
  }

  .steps {
    padding: 30px 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #e4e7ed;
  }

  .steps-icon {
    width: 64px;
  }

  .steps-icon img {
    width: 100%;
    margin-bottom: 10px;
  }

  .steps-arrow {
    padding-top: 14px;
  }

  .enter-register {
    padding: 25px 0;
    text-align: center;
  }

  .apply-detail-item {
      padding: 12px 0;
  }

  .apply-detail-item:first-child {
      border-bottom: 1px solid #e4e7ed;
  }

  .apply-detail h2 {
      font-size: 16px;
      color: #303133;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 10px;
  }

 .apply-detail ul {
      padding: 0;
      list-style: none;
  }

  .apply-detail-item ul li {
      font-size: 14px;
      color: #606266;
      padding-left: 20px;
      line-height: 24px;
      position: relative;
  }

  .apply-detail-item ul li:after {
      position: absolute;
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #c0c4cc;
      left: 0;
      top: 9px;
  }

  .apply-detail-item {
      padding: 12px 0;
  }

  .apply-detail h2 {
      font-size: 16px;
      color: #303133;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 10px;
  }

  .enter-register {
      padding: 25px 0;
      text-align: center;
  }

  .enter-register .mix-input-btn {
      background: #fff;
      font-size: 12px;
      position: absolute;
      right: 2px;
      top: 10px;
      color: #303133;
      font-weight: 500;
      height: 20px;
      line-height: 20px;
      padding: 0 15px;
      border-left: 1px solid #dcdfe6;
      cursor: pointer;
  }
  .enter-register .mix-input-btn .el-link:after{
     border-color: transparent;
  }
</style>
